<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatDev数字博物馆</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/three-dots@0.3.2/dist/three-dots.min.css">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Ma+Yen+Kai&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-scroll-effect/dist/style.css">
</head>
<body>
    <div class="scroll-container">
        <div class="chinese-scroll">
            <div class="bamboo-content">
                <div class="pattern-overlay"></div>
                
                <header>
                    <nav>
                        <div class="logo">ChatDev数字博物馆</div>
                        <ul>
                            <li><a href="#hero" class="magnetic-link"><span>首页</span></a></li>
                            <li><a href="#cultural-heritage" class="magnetic-link"><span>考古时间线</span></a></li>
                            <li><a href="#exhibitions" class="magnetic-link"><span>研究与保护</span></a></li>
                        </ul>
                    </nav>
                </header>

                <main>
                    <section id="hero">
                        <div class="swiper hero-slider">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="slide-inner">
                                        <img src="./images/slider/slide3.jpg" alt="清华简保护">
                                        <div class="slide-overlay">
                                            <h2>科技保护</h2>
                                            <p>运用现代科技保护和研究战国竹简</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-inner">
                                        <img src="./images/slider/slide1.png" alt="清华简展示">
                                        <div class="slide-overlay">
                                            <h2>清华简</h2>
                                            <p>战国中晚期珍贵竹简，展现先秦古籍原貌</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="slide-inner">
                                        <img src="./images/slider/slide2.png" alt="清华简研究">
                                        <div class="slide-overlay">
                                            <h2>文化传承</h2>
                                            <p>了解中华文化的初期面貌和发展脉络</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </section>

                    <section id="quote-section" class="parallax-section">
                        <div class="quote-container">
                            <blockquote data-aos="fade-up">
                                <div class="cultural-slogan">
                                    <p>"以科技演绎传统，以创新传承文明"</p>
                                </div>
                            </blockquote>
                        </div>
                    </section>

                    <section class="stats-section">
                        <div class="stats-container">
                            <div class="stat-item" data-aos="fade-up">
                                <div class="stat-number">
                                    <span class="counter" data-target="2500">0</span>
                                    <span class="plus">+</span>
                                </div>
                                <div class="stat-label">枚竹简</div>
                                <div class="stat-wave"></div>
                            </div>
                            <div class="stat-item" data-aos="fade-up" data-aos-delay="100">
                                <div class="stat-number">
                                    <span class="counter" data-target="14">0</span>
                                    <span class="plus">+</span>
                                </div>
                                <div class="stat-label">成果整理</div>
                                <div class="stat-wave"></div>
                            </div>
                            <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
                                <div class="stat-number">
                                    <span class="counter" data-target="2300">0</span>
                                    <span class="plus">+</span>
                                </div>
                                <div class="stat-label">年历史</div>
                                <div class="stat-wave"></div>
                            </div>
                        </div>
                    </section>

                    <section id="cultural-heritage">
                        <div class="heritage-container">
                            <h2 class="section-title" data-aos="fade-up">考古时间线</h2>
                            <div class="heritage-timeline">
                                <div class="timeline-item" data-aos="fade-left">
                                    <div class="timeline-content">
                                        <h3>归来如初，竹简重现</h3>
                                        <p>流散海外的战国竹简终归故土，清华大学开启保护与研究之旅，揭开尘封千年的历史画卷。</p>
                                        <div class="timeline-period">2008年</div>
                                    </div>
                                </div>
                                <div class="timeline-item" data-aos="fade-right">
                                    <div class="timeline-content">
                                        <h3>初绽华光，文脉重接</h3>
                                        <p>出土文献中心成立，竹简首批成果问世，遗篇重现，周文王遗训与《系年》诉说千年往事。</p>
                                        <div class="timeline-period">2009年-2011年</div>
                                    </div>
                                </div>
                                <div class="timeline-item" data-aos="fade-left">
                                    <div class="timeline-content">
                                        <h3>简中有数，史韵悠长</h3>
                                        <p>竹简释读渐入佳境，文献涵盖诗乐、史事与算表，点亮先秦文明的璀璨星河。</p>
                                        <div class="timeline-period">2013年-2020年</div>
                                    </div>
                                </div>
                                <div class="timeline-item" data-aos="fade-right">
                                    <div class="timeline-content">
                                        <h3>弦歌不辍，古韵新生</h3>
                                        <p>深掘竹简之秘，释出《五纪》《三不韦》等珍贵篇章，重现礼乐风华，延续文化薪火。</p>
                                        <div class="timeline-period">2021年-2023年</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section id="exhibitions">
                        <h2 class="section-title" data-aos="fade-up">研究与保护</h2>
                        <div class="exhibition-grid">
                            <a href="cultural-examination.html" class="exhibition-card" data-aos="fade-up" data-aos-delay="200" style="text-decoration: none; color: inherit;">
                                <div class="card-image-wrapper">
                                    <img src="./images/exhibitions/exhibition1.png" alt="清华简保护">
                                </div>
                                <div class="card-content">
                                    <h3>文物考察</h3>
                                    <p>对出土文物进行科学清理、保护和研究，确保文物的完整性和真实性</p>
                                </div>
                            </a>
                            <a href="warring-states-bamboo.html" class="exhibition-card" data-aos="fade-up" style="text-decoration: none; color: inherit;">
                                <div class="card-image-wrapper">
                                    <img src="./images/exhibitions/exhibition2.png" alt="清华简发现">
                                </div>
                                <div class="card-content">
                                    <h3>战国文化</h3>
                                    <p>千余枚战国竹简，展现战国文化</p>
                                </div>
                            </a>
                            <a href="research-achievements.html" class="exhibition-card" data-aos="fade-up" data-aos-delay="100" style="text-decoration: none; color: inherit;">
                                <div class="card-image-wrapper">
                                    <img src="./images/exhibitions/exhibition3.png" alt="清华简研究">
                                </div>
                                <div class="card-content">
                                    <h3>全辑整理</h3>
                                    <p>已出版十四辑整理成果，展现先秦文献珍贵价值</p>
                                </div>
                            </a>
                        </div>
                    </section>

                </main>

                <footer>
                    <div class="footer-content">
                        <div class="footer-left">
                            <img src="images/logo/chatdev-logo.png" alt="ChatDev Logo" class="footer-logo">
                            <div class="contact" data-aos="fade-up">
                                <p>ChatDev数字博物馆</p>
                                <p>https://github.com/OpenBMB/ChatDev</p>
                            </div>
                        </div>
                        <div class="opening-hours" data-aos="fade-up" data-aos-delay="100">
                            <p>以上内容由AI生成，可能存在偏差，请谨慎使用</p>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.0/vanilla-tilt.min.js"></script>
    <script src="script.js"></script>
</body>
</html> 